<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>易维--工单系统</title>
    <link href="static/user/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/user/css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="static/user/css/font_43459_lbtux0zjkr6yldi.css">
    <link rel="stylesheet" href="static/user/css/register.css">
</head>
<body>
<div id="main" class="main-warp">
    <div class="main-content">
        <div class="formDiv">

            <h2 class="title text-center">欢迎您的注册使用</h2>

            <form id="registerForm" role="form" class="form-horizontal " action="javaScript:;" method="post">
                <div class="form-item">
                    <div class="input-warp">
                        <span class="input-icon iconfont icon-yonghu1"></span><input id="nickName" name="nickName"
                                                                                     placeholder="输入真实姓名" type="text"
                                                                                     class="inputs" value=""/>
                    </div>
                    <p id="nickNameErr" class="errMsg"></p>
                </div>
                <div class="form-item">
                    <div class="input-warp">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input id="password" type="password" placeholder="输入密码" maxlength="20" name="password" value=""
                               class="inputs"/>
                    </div>
                    <p id="passwordErr" class="errMsg"></p>
                </div>
                <div class="form-item">
                    <div class="input-warp">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input id="repwd" type="password" placeholder="至少6位字母或数字" maxlength="20" name="password2"
                               value=""
                               class="inputs"/>
                    </div>
                    <p id="passwordErr2" class="errMsg"></p>
                </div>
                <div class="form-item">
                    <div class="input-warp">
                        <span class="input-icon iconfont icon-phone"></span><input id="phone" name="phone"
                                                                                   placeholder="输入手机号码" type="text"
                                                                                   class="inputs" value=""/>
                    </div>
                    <p id="phoneErr" class="errMsg"></p>
                </div>
                <div class="form-item">
                    <div class="input-warp">
                        <span class="input-icon iconfont icon-user"></span>
                        <select class="inputs" id="sex" name="sex" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <p id="sexErr" class="errMsg"></p>
                </div>
                <div class="form-item">
                    <div class="input-warp s">
                        <span class="input-icon iconfont icon-yanzhengma"></span>
                        <input id="kaptcha" name="kaptcha" placeholder="验证码" type="text" class="inputs" value=""/>
                        <div id="popup-captcha" style="display: none"></div>
                    </div>
                    <div class="pull-right">
                        <input type="hidden" id="code" name="code">
                        <button id="btnSendCode" class="btn lgbtn blue" style="width: 100px">获取验证码</button>
                    </div>
                    <p id="kaptchaErr" class="errMsg"></p>
                </div>
                <div class="btn-warp">
                    <div class="text-center">
                        <button type="submit" id="btnSubmit" class="btn lgbtn blue btn-block">注册</button>
                        <input id="appName" name="appName" type="hidden" value="jsform"/>
                    </div>
                </div>
                <div class="agreement gap">
                    <div class="text-right">
                        <div class="pull-left">已有账号，<a href="login.jsp" class="link">登录</a></div>
                        <p>注册即代表您已阅读并同意《<a href="javascript:;" target="_blank" class="link">使用协议</a>》</p>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script src="static/js/jquery3.4.1.js"></script>
<script src="static/js/jquery.validate.min.js"></script>
<script src="static/js/jquery.serializejson.min.js"></script>
<script src="static/layer/layer.js"></script>
<!--表单验证-->
<script>
    $("#registerForm").validate({
        rules:{
            nickName:{
                required:true,
                minlength:2,
                isChinese:true,
                remote: {
                    url: "${pageContext.request.contextPath}/user/isExist.handler",     //后台处理程序
                    type: "post",               //数据发送方式
                    data: {                     //要传递的数据
                        param: function() {
                            return $("#nickName").val();
                        }
                    }
                }
            },
            password:{
                required: true,
                minlength:6,
                isPassword:true
            },
            password2:{
                equalTo:"#password"
            },
            phone:{
                required:true,
                isPhone:true,
                remote: {
                    url: "${pageContext.request.contextPath}/user/isExist.handler",     //后台处理程序
                    type: "post",               //数据发送方式
                    data: {                     //要传递的数据
                        param: function() {
                            return $("#phone").val();
                        }
                    }
                }
            },
            sex:{
                required:true
            },
            kaptcha:{
                required:true,
                isCode: true
            }
        },
        messages:{
            nickName:{
                required:"请输入真实姓名",
                minlength:"请输入至少两个字符",
                remote:"该真实姓名已被注册"
            },
            password:{
                required: "请输入密码",
                minlength:"请输入至少6位",
            },
            password2:{
                equalTo:"两次密码不一致"
            },
            phone:{
                required:"请输入手机号码",
                remote:"该手机号已被注册"
            },
            sex:{
                required:"请选择性别"
            },
            kaptcha:{
                required:"请输入验证码"
            }
        },
        errorPlacement: function(error, element) {
            let id = element[0].id;
            if(id == "kaptcha"){
                error.appendTo(element.parent("div").next().next())
            }else {
                error.appendTo(element.parent("div").next("p"))
            }
        },
        //提交事件
        submitHandler:function (form) {
            let data = $(form).serialize();
            $.ajax({
                url:"${pageContext.request.contextPath}/user/newUser.handler",
                data:data,
                success:function (data) {
                    if(data){
                        layer.msg('注册成功!请等待工作人员审核......', {icon: 1},function () {
                            $(form)[0].reset();
                            window.location.href = "${pageContext.request.contextPath}/login.jsp";
                        });
                    }else {
                        layer.msg('注册失败！！请刷新后重试', {icon: 2});
                    }
                }
            });
        }
    });

    // 判断中文字符
    jQuery.validator.addMethod("isChinese", function(value, element) {
        return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
    }, "只能包含中文字符。");

    //手机号验证规则
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var length = value.length;
        var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
        return this.optional(element) || (length == 11 && phone_number.test(value));
    }, "手机号码格式错误");

    //验证码验证
    jQuery.validator.addMethod("isCode", function(value, element, param) {
        let code = $("#code").val().toUpperCase();
        return value.toUpperCase() == code;
    }, $.validator.format("验证码不正确"));

    //密码等级验证规则
    jQuery.validator.addMethod("isPassword", function(value, element) {
        let regExp1 = /[0-9]+/;
        let regExp2 = /[A-Z]+/;
        let regExp3 = /[a-z]+/;
        let regExp4 = /[^\w\d]+/;
        let number = regExp1.test(value) + regExp2.test(value) + regExp3.test(value) + regExp4.test(value);
        return number > 2;
    }, "密码安全等级过低");

</script>

<!--创建验证码-->
<script>
    $("#btnSendCode").click(function () {
        let code = createCode();
        $("#btnSendCode").text(code);
        $("#code").val(code);
    });
    function createCode(e) {
        code = "";
        var codeLength = 4;
        var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 60);
            code += selectChar[charIndex];
        }
        if (code.length != codeLength) {
            createCode(e);
        }
        return code;
    }
</script>
</body>
</html>
